<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script src="../js/vue.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 
            v-if v-else-if v-else  v-show 四个模板指令
         -->
        <!-- v-if=boolean true 显示隐藏 隐藏 element 直接干掉 无所占空间 -->
        <div class="box" v-if="box"> box </div>
        <!-- 一组多个判断 v-if v-else-if v-else  不允许被打断-->
        <div class="box" v-if="n === 1 "> number1 </div>
        <div class="box" v-else-if="n === 2 "> number2 </div>
        <div class="box" v-else> number3 </div>
        <!-- v-show=boolean true 显示隐藏 隐藏 element 就是加了个样式 display:none 占原来的空间 
            频繁切换用这个
        -->
        <div class="box" v-show="show"> show </div>
        <!-- template 不破坏结构 template 不显示在element上 却还可以在上面加v-if 的判断 不能加v-show -->
        <template v-if="box">
            <h1> aaa </h1>
            <h1> bbb </h1>
            <h1> ccc </h1>
        </template>

    </div>  
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            box:true,
            show:true,
            n:1
        }
    })

</script>
</html>